<template>
  <div class="article-detail">
    <div class="container">
      <div class="article-container" v-loading="loading">
        <template v-if="article">
          <div class="article-header">
            <h1 class="article-title">{{ article.title }}</h1>
            <div class="article-meta">
              <div class="meta-item author">
                <el-avatar :size="36" :src="article.authorAvatar || defaultAvatar"></el-avatar>
                <span>{{ article.author }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Clock /></el-icon>
                <span>{{ formatDate(article.createdAt) }}</span>
              </div>
            </div>
            <div class="article-tags">
              <el-tag
                v-for="tag in article.tags"
                :key="tag"
                effect="plain"
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <div class="article-cover" v-if="article.coverImage">
            <img :src="article.coverImage" :alt="article.title">
          </div>
          
          <div class="article-content">
            <!-- 实际项目中可以使用Markdown渲染组件 -->
            <div v-html="article.content"></div>
          </div>
          
          <div class="article-actions">
            <el-button type="primary" plain>
              <el-icon><Star /></el-icon>
              收藏
            </el-button>
            <el-button type="success" plain>
              <el-icon><Share /></el-icon>
              分享
            </el-button>
          </div>
        </template>
        
        <div class="empty-placeholder" v-if="!loading && !article">
          <el-empty description="文章不存在或已被删除" />
          <el-button type="primary" @click="backToHome">返回首页</el-button>
        </div>
      </div>
      
      <div class="sidebar">
        <div class="sidebar-card author-info" v-if="article">
          <h3 class="sidebar-title">作者信息</h3>
          <div class="author-card">
            <el-avatar :size="60" :src="article.authorAvatar || defaultAvatar"></el-avatar>
            <div class="author-name">{{ article.author }}</div>
            <div class="author-bio">专注于前端技术分享，热爱编程与开源</div>
            <el-button type="primary" plain class="follow-btn">关注作者</el-button>
          </div>
        </div>
        
        <div class="sidebar-card related-articles">
          <h3 class="sidebar-title">相关文章</h3>
          <ul class="related-article-list">
            <li v-for="relatedArticle in relatedArticles" :key="relatedArticle.id" @click="navigateToArticle(relatedArticle.id)">
              <span class="article-title">{{ relatedArticle.title }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Clock, Star, Share } from '@element-plus/icons-vue'
import { getArticleDetail } from '../api/article'

interface Article {
  id: string;
  title: string;
  content: string;
  author: string;
  authorId: string;
  authorAvatar: string;
  createdAt: string;
  updatedAt: string;
  tags: string[];
  coverImage: string;
}

interface RelatedArticle {
  id: string;
  title: string;
}

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const article = ref<Article | null>(null)
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

// 相关文章列表（示例数据）
const relatedArticles = ref<RelatedArticle[]>([
  { id: '2', title: 'Vue3 组合式 API 详解与实践' },
  { id: '3', title: 'TypeScript 在大型项目中的应用' },
  { id: '4', title: '前端工程化最佳实践' },
  { id: '5', title: 'Vite + Vue3 项目搭建指南' }
])

// 获取文章详情
async function fetchArticleDetail() {
  const id = route.params.id as string
  
  if (!id) {
    return
  }
  
  try {
    loading.value = true
    
    // 实际项目中应该调用API获取文章详情
    // const res = await getArticleDetail(id)
    
    // 模拟数据
    // 延迟500毫秒模拟网络请求
    await new Promise(resolve => setTimeout(resolve, 500))
    
    article.value = {
      id,
      title: `文章标题 ${id}`,
      content: `
        <p>这是一篇技术博客文章的详细内容。实际项目中，这里会展示Markdown渲染后的HTML内容。</p>
        <h2>第一部分</h2>
        <p>Vue 3是Vue.js的最新主要版本，它引入了许多新特性和改进，如组合式API、更好的TypeScript支持、更小的包体积等。</p>
        <pre><code>
// 组合式API示例
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    
    function increment() {
      count.value++
    }
    
    onMounted(() => {
      console.log('组件已挂载')
    })
    
    return {
      count,
      doubleCount,
      increment
    }
  }
}
        </code></pre>
        <h2>第二部分</h2>
        <p>TypeScript是JavaScript的超集，它添加了静态类型和一些其他特性，使代码更加健壮和可维护。</p>
        <p>在Vue 3项目中使用TypeScript可以获得更好的开发体验和类型安全。</p>
        <h2>第三部分</h2>
        <p>Vite是一个现代前端构建工具，它利用浏览器原生ES模块导入能力，提供了极快的开发服务器启动速度和热更新性能。</p>
        <p>结合Vue 3和TypeScript，Vite能够提供出色的开发体验。</p>
      `,
      author: '技术博主',
      authorId: 'user1',
      authorAvatar: '',
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      tags: ['Vue', 'TypeScript', 'JavaScript'],
      coverImage: Number(id) % 2 === 0 ? `https://picsum.photos/id/23/1200/400` : ''
    }
  } catch (error) {
    console.error('获取文章详情失败:', error)
    article.value = null
  } finally {
    loading.value = false
  }
}

// 格式化日期
function formatDate(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 跳转到相关文章
function navigateToArticle(id: string) {
  router.push(`/article/${id}`)
}

// 返回首页
function backToHome() {
  router.push('/')
}

onMounted(() => {
  fetchArticleDetail()
})
</script>

<style scoped lang="scss">
.article-detail {
  padding-top: 80px;
  min-height: calc(100vh - 80px);
  background-color: #f5f7fa;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 30px;
}

.article-container {
  flex: 1;
  min-height: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.article-header {
  margin-bottom: 30px;
  
  .article-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #303133;
  }
  
  .article-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #909399;
    margin-bottom: 15px;
    
    .meta-item {
      display: flex;
      align-items: center;
      margin-right: 20px;
      
      .el-icon {
        margin-right: 5px;
      }
    }
    
    .author {
      .el-avatar {
        margin-right: 8px;
      }
    }
  }
  
  .article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
  }
}

.article-cover {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  
  img {
    width: 100%;
    display: block;
  }
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #303133;
  
  h1, h2, h3, h4, h5, h6 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #303133;
  }
  
  p {
    margin-bottom: 15px;
  }
  
  pre {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
    
    code {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
      font-size: 14px;
    }
  }
}

.article-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
}

.sidebar {
  width: 300px;
  
  @media (max-width: 768px) {
    display: none;
  }
}

.sidebar-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #303133;
}

.author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
  .author-name {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0 5px;
  }
  
  .author-bio {
    font-size: 14px;
    color: #606266;
    margin-bottom: 15px;
  }
  
  .follow-btn {
    width: 100%;
  }
}

.related-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  li {
    padding: 10px 0;
    cursor: pointer;
    transition: color 0.2s;
    
    &:hover {
      .article-title {
        color: #409eff;
      }
    }
    
    &:not(:last-child) {
      border-bottom: 1px dashed #f0f0f0;
    }
    
    .article-title {
      font-size: 14px;
      line-height: 1.6;
      color: #606266;
    }
  }
}

.empty-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  
  .el-button {
    margin-top: 20px;
  }
}
</style> 